<template>
    <div class="page-box">
        <TemplateVue
            :insert="true"
            :table="tableData"
            :list="searchList"
            @search="onSearch"
            @reset="onReset"
            :pagination="pagination"
            @paginationChange="onPaginationChange"
            @paginationSize="onPaginationSize"
        >
            <template #add><el-button @click="onSkip">新增协议</el-button></template>
            <template #btn="{ index }">
                <el-button>查看</el-button>
            </template>
            <template #switch="{ index, row }">
                <el-switch
                    v-model="row.status"
                    inline-prompt
                    active-text="启用"
                    inactive-text="禁用"
                    @change="onStatusChange(row.id, row.status)"
                />
            </template>
        </TemplateVue>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import TemplateVue from '@/components/template/Index.vue'
import { searchItemInterface } from '@/components/search/index'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
//默认分页
const pagination = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0
})

const searchList: Array<searchItemInterface | string> = [{ key: 'name', name: '协议名称', type: 'select', options: [] }]

//表格数据接口
interface DataInterface {
    data: any[]
    describe: any[]
    selection: boolean
}
//表格数据
const tableData: DataInterface = reactive({
    data: [],
    describe: [],
    selection: false
})

const onSearch = (res: any) => {
    console.log(res)
    getData(res.name)
}
const onReset = () => {
    console.log('重置')
    pagination.pageNo = 1
    getData()
}
const onPaginationChange = (index: number) => {
    console.log('index', index)
}
//监听选择每页显示个数
const onPaginationSize = (size: number) => {
    pagination.pageNo = 1
    pagination.pageSize = size
    getData()
}

//实例化路由
const router = useRouter()
const onSkip = () => {
    router.push({
        path: '/system/protocol/edit',
        query: { type: 'add' }
    })
}

//监听用户某个switch 开关
const onStatusChange = (id: string, status: boolean) => {}
//对于表格数据lable
const TABLE_PROP_NAME = {
    name = '协议名称',
    createBy = '创建人',
    type = '应用渠道',
    version = '版本',
    createTime = '创建时间',
    status = '状态'
}

//获取协议分页数据
const getData = (code = '') => {}

//页面挂载完成
onMounted(() => {
    getData()
})
</script>
